import { GeneratePodcastProps } from '@/types'
import { useState,useEffect  } from 'react'
import { Label } from './ui/label'
import { Textarea } from './ui/textarea'
import { Button } from './ui/button'
import { Loader } from 'lucide-react'
import { ReactMutation, useAction, useMutation } from 'convex/react'
import { api } from '@/convex/_generated/api'

// 定义一个自定义钩子 `useGeneratePodcast`，负责通过 AI 生成播客
const useGeneratePodcast = ({
  setAudio, // 设置音频 URL 的函数
  voiceType, // 播客使用的声音类型
  voicePrompt, // 播客内容的文本输入
  setAudioStorageId // 设置音频存储 ID 的函数
}: GeneratePodcastProps) => {
  // 用于跟踪播客生成状态的状态
  const [isGenerating, setIsGenerating] = useState(false);

  // 使用 toast 通知的钩子
  const { toast } = useToast();

  // 生成音频文件上传 URL 的变异钩子
  // const generateUploadUrl = useMutation(api.files.generateUploadUrl);
  // 处理上传过程的自定义钩子
  // const { startUpload } = useUploadFiles(generateUploadUrl);

  // 使用 OpenAI API 生成播客音频的操作
  const getPodcastAudio = useAction(api.openai.generateAudioAction);
  
  // 通过存储 ID 获取音频 URL 的变异钩子
  const getAudioUrl = useMutation(api.podcasts.getUrl);

  // 处理播客生成过程的函数
  const generatePodcast = async () => {
    // 设置生成状态为 true
    setIsGenerating(true);
    // 清除之前的音频 URL
    setAudio('');

    // 检查是否提供了 voicePrompt
    if (!voicePrompt) {
      // 如果缺少 voicePrompt，则显示 toast 通知
      toast({
        title: "Please provide a voicePrompt to generate a podcast",
      });
      // 重置生成状态并返回
      return setIsGenerating(false);
    }

    try {
      // 使用 OpenAI API 生成播客音频
      const response = await getPodcastAudio({
        voice: voiceType,
        input: voicePrompt
      });

      // 从音频响应创建一个 Blob
      const blob = new Blob([response], { type: 'audio/mpeg' });
      // 生成音频文件的唯一文件名
      const fileName = `podcast-${uuidv4()}.mp3`;
      // 从 Blob 创建一个 File 对象
      const file = new File([blob], fileName, { type: 'audio/mpeg' });

      // 开始上传过程并获取响应
      // const uploaded = await startUpload([file]);
      // const storageId = (uploaded[0].response as any).storageId;

      // 设置存储 ID
      // setAudioStorageId(storageId);

      // 使用存储 ID 获取音频 URL
      // const audioUrl = await getAudioUrl({ storageId });
      // 设置音频 URL
      // setAudio(audioUrl!);
      // 重置生成状态
      setIsGenerating(false);
      // 显示成功生成的 toast 通知
      toast({
        title: "播客生成成功",
      });
    } catch (error) {
      // 记录错误并显示错误的 toast 通知
      console.log('生成播客时出错', error);
      toast({
        title: "创建播客时出错",
        variant: 'destructive',
      });
      // 重置生成状态
      setIsGenerating(false);
    }
  };

  // 返回生成状态和生成播客的函数
  return { isGenerating, generatePodcast };
};


const GeneratePodcast = (props:GeneratePodcastProps) => {

  const {isGenerating, generatePodcast} = useGeneratePodcast(props);
 
  return (   
    <div>

      <div className='flex flex-col gap-2.5'>
        <Label className='text-16 font-bold text-white-1'>
          AI prompt to generate your podcast
        </Label>
        <Textarea
        className="input-class focus-visible:ring-offset-orange-1 font-light"
        placeholder='Provide text to generate your audio'
        rows={5}
        value={props.voicePrompt}
        onChange={(e) => props.setVoicePrompt(e.target.value)}
        />

      </div>
      <div className='mt-5 w-full max-w-[200px]'>
      <Button type="submit" 
                  className="text-16 bg-orange-1
                  py-4 font-bold text-white-1">
                    {isGenerating ? 
                    (
                      <>
                        generating
                        <Loader size="20" className="animate-spin ml-2"/>
                      </>
                    ): 
                    ('Generate ') }
                  </Button>
      </div>
      {props.audio && (
        <audio 
        controls
        src={props.audio}
        autoPlay
        onLoadedMetadata={(e) => 
          props.setAudioDuration(e.currentTarget.duration)}/>
        
      )}
    </div>
  )
}

export default GeneratePodcast

function uuidv4() {
  throw new Error('Function not implemented.')
}
function useToast(): { toast: any } {
  throw new Error('Function not implemented.')
}

function useUploadFiles(generateUploadUrl: ReactMutation<any>): { startUpload: any } {
  throw new Error('Function not implemented.')
}

